<template>
  <div>
      <div class="news_header">
          
          <i class="iconfont icon-fanhui" @click="prev"></i>
          <h3>消息中心</h3>
          <p>全部已读</p>
      </div>

      <div class="news_fabulous">
          <ul>
              <li>
                  <div>
                      <i class="iconfont icon-pinglun"></i>
                  </div>
                  <div>
                      <p>评论和@</p>
                  </div>
              </li>
              <li>
                  <div>
                      <i class="iconfont icon-wujiaoxingkong"></i>
                  </div>
                  <div>
                      <p>收藏和赞</p>
                  </div>
              </li>
              <li>
                  <div>
                      <i class="iconfont icon-wode1"></i>
                  </div>
                  <div>
                      <p>新的粉丝</p>
                  </div>
              </li>
          </ul>
      </div>

      <div class="news_active">
          <p>热门活动</p>
          <p>全部活动</p>
      </div>

      <div class="news_img">
           <div class="swiper mySwiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide small" v-for="(item,index) in actives" :key="index">
            <img :src="item.i" alt="">
        </div>
        
      </div>
      <div class="swiper-pagination"></div>
    </div>
      </div>

    <div class="letter">
        <h4>私信消息</h4>
        <div class="end">
            <p>———  End  ———</p>
        </div>
    </div>

  </div>
</template>

<script>
import {getHomeRecommended} from "../../api/recommend"
import Swiper from 'swiper';
    export default {
        data(){
            return{
                actives:[]
            }
        },
        methods:{
             prev() {
      this.$router.go(-1);
    },
        },
        mounted(){
             new Swiper('.swiper-container', {
        pagination: '.swiper-pagination-01',
        slidesPerView: 2,  //显示个数
        paginationClickable: true,
        observer:true,
         freeMode: true,
        observeParents:true,
         
        spaceBetween: 20 //div之间间距
    });
        },
        created(){
            getHomeRecommended().then((data)=>{
                this.actives = data.result.banner;
                console.log(data);
            })
        }
}
</script>

<style lang="less">

    .news_header{
        margin-top:45px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        i{
            font-size: 16px;
            line-height: 16px;
        }
        h3{
            font-size: 16px;
            line-height: 16px;
            font-weight: bold;
        }
        p{
            font-size: 11px;
            padding: 0 8px;
            line-height: 27px;
            border: 2px solid #EDEDED;
            border-radius: 20px;
            color: #4E4E4E;
        }
    }

    .news_fabulous{
        margin-top: 37px;
        ul{
            display: flex;
            align-items: center;
            justify-content: space-around;
            li{
                display: flex;
                flex-direction: column;
                align-items: center;
                div:nth-child(1){
                    width: 50px;
                    height: 50px;
                    border-radius:50%;
                    background-color: #FFD664;
                    text-align: center;
                    i{
                        font-size: 22px;
                        line-height: 50px;
                        font-weight: bold;
                    }
                }
                div:nth-child(2){
                    margin-top: 11px;
                    p{
                        font-size: 14px;
                        line-height: 14px;
                    }
                }
            }
        }
    }

    .news_active{
        margin-top: 25px;
        width: 100%;
        height: 45px;
        background-color: #FAFAFA;
        display: flex;
        justify-content: space-between;
        p{
            font-size: 14px;
            line-height: 45px;
        }
        :nth-child(1){
             margin-left: 16px;
        }
        :nth-child(2){
            margin-right: 16px;
        }
    }
    
    .news_img{
        padding-left: 15px;
        margin-top: 15px;
        .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
       height: 87px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      
          .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
          }
      

    }

    .letter{
          margin-top: 25px;
        width: 100%;
        height: 45px;
        background-color: #FAFAFA;
        h4{
             font-size: 14px;
            line-height: 45px;
            margin-left: 16px;
        }
        .end{
            margin-top: 45px;
            text-align: center;
            p{
                font-size: 10px;
                color: #EFEFEF;
                font-weight: bold;
            }
        }
    }
</style>